<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>资源管理</title>
    <link rel="stylesheet" href="../../../component/pear/css/pear.css"/>
    <style>
        .query {
            display: none;
            padding: 0px 5px;
        }
        .gl{
            background-color:rgba(250,230,160,0.5)
        }
    </style>
</head>
<body class="pear-container">
<div class="query">
    <form class="layui-form" action="">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md12">
                <div class="layui-card" style="margin-top: 10px;">
                    <div class="layui-card-header">关键字</div>
                    <div class="layui-card-body layui-row layui-col-space10">
                        <div class="layui-col-md12">
                            <input type="text" name="keyword" placeholder="关键字" autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                </div>

                <div class="layui-card" style="margin-top: 10px;">
                    <div class="layui-card-body layui-row layui-col-space10">
                        <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="query">
                            <i class="layui-icon layui-icon-search"></i>
                            查询
                        </button>
                        <button type="reset" class="pear-btn pear-btn-md">
                            <i class="layui-icon layui-icon-refresh"></i>
                            重置
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<div class="layui-card">
    <div class="layui-card-body">
        <table id="treeTable-table" lay-filter="treeTable-table"></table>
    </div>
</div>

<script type="text/html" id="treeTable-toolbar">
    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
    <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
        <i class="layui-icon layui-icon-delete"></i>
        删除
    </button>
    <button class="pear-btn pear-btn-md" lay-event="expandAll">
        <i class="layui-icon layui-icon-spread-left"></i>
        展开
    </button>
    <button class="pear-btn pear-btn-md" lay-event="foldAll">
        <i class="layui-icon layui-icon-shrink-right"></i>
        折叠
    </button>
    <button class="pear-btn pear-btn-success pear-btn-md" lay-event="reload">
        <i class="layui-icon layui-icon-refresh"></i>
        重载
    </button>
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="query">
        <i class="icon pear-icon pear-icon-search"></i>
        查询
    </button>
</script>

<script type="text/html" id="treeTable-bar">
    {{#if (d.res_type == '1') { }}
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>
    </button>
    {{# }else if(d.res_type=='2'){ }}
    <!--<button class="pear-btn layui-bg-orange pear-btn-sm" lay-event="power"><i class="layui-icon layui-icon-vercode"></i>-->
    <!--</button>-->
    {{# } }}
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>
    </button>
    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i>
    </button>
</script>

<script type="text/html" id="treeTable-type">
    {{#if (d.res_type == '1') { }}
    <span class="icon pear-icon pear-icon-folder-close" style="color: #1e9fff">目录</span>
    {{# }else if(d.res_type == '2'){ }}
    <span class="icon pear-icon pear-icon-link" style="color: #bd2c00">资源</span>
    {{# } }}
</script>


<script src="../../../config/apiUrl.js"></script>
<script src="../../../component/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>
<script>
    layui.use(['treeTable','table', 'form', 'http', 'drawer','toast','popup'], function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let http = layui.http;
        let drawer = layui.drawer;
        let treetable = layui.treeTable;
        let toast = layui.toast;
        let popup = layui.popup;
        let MODULE_PATH = "";
        $(document).keyup(function (event) {
            if (event.keyCode == 27) {
                let layer_index = layer.index;
                if(layer_index>0){
                    layer.close(layer_index);
                }
            }
        });
        const bc = new BroadcastChannel('resListReload');
        bc.onmessage = function (e) {
            treetable.reloadData("treeTable-table");
        };
        treetable.render({
            method: 'post',
            toolbar: '#treeTable-toolbar',
            elem: '#treeTable-table',
            url: apiUrlConfig.res.List,
            headers: {
                "authorization": http.ajax.getToken()
            },
            tree:{
                data:{
                    isSimpleData:true,
                    rootPid:0,
                    cascade:"children"
                },
                customName:{
                    name:"resName",
                    pid:"pid"
                }
            },
            page: false,
            cols: [
                [
                    {type: 'checkbox'},
                    {field: 'resName', minWidth: 200, title: '资源名称'},
                    {field: 'res_type', title: '资源类型', templet: '#treeTable-type'},
                    {field: 'link', title: '地址'},
                    {title: '操作', templet: '#treeTable-bar', width: 200, align: 'center'}
                ]
            ]
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.status, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "data": res.data //解析数据列表
                };
            }
            , response: {
                statusCode: 200 //规定成功的状态码，默认：0
            }
            ,error:function (e,msg){
                if(e.status == 403){
                    const bc = new BroadcastChannel('exitLogin');
                    bc.postMessage("exitLogin")
                }
            }
        });

        table.on('tool(treeTable-table)', function (obj) {
            if (obj.event === 'remove') {
                window.remove(obj);
            } else if (obj.event === 'edit') {
                window.edit(obj);
            }else if (obj.event === 'add') {
                window.add(obj);
            }else if (obj.event === 'power') {
                window.power(obj);
            }
        })

        table.on('toolbar(treeTable-table)', function (obj) {
            if (obj.event === 'add') {
                window.add();
            } else if (obj.event === 'refresh') {
                window.refresh();
            } else if (obj.event === 'batchRemove') {
                window.batchRemove(obj);
            } else if (obj.event === 'expandAll') {
                treetable.expandAll("treeTable-table",true);
            } else if (obj.event === 'foldAll') {
                treetable.expandAll("treeTable-table",false);
            } else if (obj.event === 'reload') {
                treetable.reloadData("treeTable-table");
            } else if (obj.event === 'query') {
                drawer.open({
                    direction: "right",
                    dom: ".query",
                    distance: "30%"
                });
            }
        });

        form.on('submit(query)', function (data) {
            $(".gl").removeClass("gl");
            var keyword = data.field.keyword;
            // treetable.search('#treeTable-table', keyword);
            var obj = treetable.getNodesByFilter('treeTable-table', function(item){
                // 自定义过滤条件
                return item.resName.indexOf(keyword)!=-1;
            });
            $.each(obj,function (index,item){
                function getParentPath(node){
                    let pnode_s = [];
                    let pnode = node.getParentNode();
                    while (pnode != undefined){
                        pnode_s.push(pnode);
                        pnode = pnode.getParentNode();
                    }
                    return pnode_s.reverse();
                }
                let ns = getParentPath(item);
                for (n of ns){
                    if(n.data.LAY_EXPAND != true){
                        n.expand();
                    }
                }
                $("[data-index='"+item.dataIndex+"'] [data-field='resName']").addClass("gl")
            })
            if(obj.length > 0){
                $('body,html').stop(true);
                $('body,html').animate({scrollTop: $("[data-index='"+obj[0].dataIndex+"'] [data-field='resName']").offset().top - 150}, 500);
            }
            return false;
        });

        window.add = function (obj) {
            layer.open({
                type: 2,
                title: obj == undefined ?"新增(顶级目录/链接)":"在【"+obj.data.resName+"】下新增",
                shade: 0.1,
                area: ['50%', '90%'],
                content: MODULE_PATH + 'res_add.html'+(obj == undefined?"":"?id="+obj.data.id+"")+''
            });
        }

        window.power = function (obj) {
            layer.open({
                type: 2,
                title: "授权【"+obj.data.resName+"】",
                shade: 0.1,
                area: ['50%', '90%'],
                content: MODULE_PATH + 'res_power.html?id='+obj.data.id
            });
        }

        window.edit = function (obj) {
            layer.open({
                type: 2,
                title: "修改【"+obj.data.resName+"】",
                shade: 0.1,
                area: ['50%', '90%'],
                content: MODULE_PATH + 'res_update.html?id='+obj.data.id
            });
        }

        window.remove = function (obj) {
            layer.confirm('确定要删除该资源么', {icon: 3, title: '提示'}, function (index) {
                layer.close(index);
                let loading = layer.load();
                http.ajax({
                    url: apiUrlConfig.res.DelById+obj.data.id,
                    dataType: 'json',
                    type: 'delete',
                    success: function (result) {
                        layer.close(loading);
                        if (result.status == 200) {
                            toast.success({title:"删除资源",message:"删除成功"});
                            treetable.reloadData("treeTable-table");
                        } else {
                            toast.error({title:"删除资源",message:"删除失败"});
                        }
                    },
                    error: function (res) {
                        layer.close(loading);
                    }
                })
            });
        }

        window.batchRemove = function (obj) {
            let data = treetable.checkStatus(obj.config.id).data;
            if (data.length === 0) {
                layer.msg("未选中数据", {
                    icon: 3,
                    time: 1000
                });
                return false;
            }
            layer.confirm('确定要删除这些数据', {
                icon: 3,
                title: '提示'
            }, function (index) {
                layer.close(index);
                let loading = layer.load();
                http.ajax({
                    url: apiUrlConfig.res.DelBatch,
                    dataType: 'json',
                    type: 'delete',
                    data:JSON.stringify(data),
                    success: function (result) {
                        layer.close(loading);
                        if (result.status == 200) {
                            toast.success({title:"删除资源",message:"删除成功"});
                            treetable.reloadData("treeTable-table");
                        } else {
                            toast.error({title:"删除资源",message:result.msg});
                        }
                    },
                    error: function (res) {
                        layer.close(loading);
                    }
                })
            });
        }
    })
</script>
</body>
</html>
